<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'>
        <title></title>
        <style>
        </style>
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    </head>
    <body>
       <div id="app">
           <my-slot>
               <img src="img/1.png" alt="" width="200" height="200">
           </my-slot>
       </div>
       <template id="my_slot">
           <div>
           <header>插槽头部</header>
           <!--预留一个插槽,例如上边放入了一个img(也可以放多个元素)，这个img就替换了slot里的内容-->
           <slot>插槽的内容</slot>
           <footer>插槽的底部</footer>
           </div>
       </template>
    </body>
</html>
<script>
Vue.component('my-slot',{
    template:'#my_slot'
})
    //1.创建vue实例
    let vm=new Vue({
        el:'#app',
        data:{
            message:'你好，世界！'
        }
    })
</script>